import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Input, Grid, Button } from '@alifd/next';
import { FormBinderWrapper, FormBinder } from '@icedesign/form-binder';
import IceContainer from '@icedesign/container';
import '@alifd/next/dist/next.css';

const { Row, Col } = Grid;

class AppUserSearch extends PureComponent {
  render() {
    const { searchFormValue, searchId } = this.props;
    console.log(searchId);

    return (
      <IceContainer title="搜索">
        <FormBinderWrapper value={searchFormValue} onChange={(value) => this.props.searchFormChange(value)}>
          <Row wrap>
            <Col xxs="24" l="6" style={styles.formCol}>
              <span style={styles.label}>用户ID:</span>
              <FormBinder name="id">
                <Input placeholder="请输入待查询用户的编号" />
              </FormBinder>
            </Col>
            <Col xxs="24" l="2" style={styles.formCol}>
              <Button type="secondary" size="medium" onClick={() => this.props.searchUserById(searchId)}>搜索</Button>
            </Col>
          </Row>
        </FormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  formRow: {
    marginBottom: '18px',
  },
  formCol: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '20px',
  },
  label: {
    lineHeight: '28px',
    paddingRight: '10px',
    color: '#424242',
  },
  preview: {
    border: '1px solid #eee',
    marginTop: 20,
    padding: 10
  }
};

const mapState = (state) => ({
  searchFormValue: state.AppUser.get('searchFormValue'),
  searchId: state.AppUser.get('searchId')
});

const mapDispatch = (dispatch) => ({
  searchFormChange(value) {
    dispatch(actionCreators.searchFormChange(value));
  },
  searchUserById(id) {
    dispatch(actionCreators.searchUserById(id));
  }
});

export default connect(mapState, mapDispatch)(AppUserSearch);
// export default AppUserSearch;